<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="数据">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" v-for="(item, index) in obj.tableData.yList" :key="'selecty' + index">
                <el-col :span="8" class="editlabel">
                    <span>选择列</span>
                </el-col>
                <el-col :span="16" class="editcontent sldyinput">
                    <el-select v-model="item.id" filterable clearable placeholder="请选择数据" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                    <i class="el-icon-error" @click="deleteDataYinfo(obj.tableData.yList, index)"></i>

                    <!-- 列样式 -->
                    <input v-model.number="item.fontSize" class="miniinput" type="number" />
                    <el-color-picker v-model="item.color2" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(item, 'color2', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': item.fontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', item, 'fontWeight')"><i class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': item.fontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', item, 'fontStyle')"><i class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="addybtn" @click="addTableDataYinfo(obj.tableData.yList)">
                + 新增数据列
            </div>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>刷新间隔</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
                        @change="reloadTimeChangeHandle" />
                    <span>秒</span>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-collapse v-model="collapseActives" class="edittypeform">
                <el-collapse-item title="表格" name="1">
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>排序</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-radio v-model="obj.tableData.orderAsc" :label="0">倒序</el-radio>
                            <el-radio v-model="obj.tableData.orderAsc" :label="1">正序</el-radio>
                            <!-- <el-radio-group v-model="obj.tableData.icon" size="mini">
                        <el-radio-button label="circle">圆形</el-radio-button>
                        <el-radio-button label="rect">矩形</el-radio-button>
                        <el-radio-button label="pin">图钉</el-radio-button>
                    </el-radio-group> -->
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>布局</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-select v-model="obj.tableLayout" filterable clearable placeholder="请选择样式" size="mini">
                                <el-option label="auto" value="auto"></el-option>
                                <el-option label="fixed" value="fixed"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>表头样式</span>
                        </el-col>
                        <el-col :span="16" class="editcontent sldyinput">
                            <input v-model.number="obj.hFontSize" class="miniinput" type="number" />
                            <el-color-picker v-model="obj.hFontColor" size="small" show-alpha :predefine="predefineColors"
                                popper-class="mycolorview" @active-change="setColorChange(obj, 'hFontColor', $event)" />
                            <div class="fontstylev">
                                <div :class="['fontitem', { 'active': obj.hFontWeight == 'bold' }]"
                                    @click="setFontStyle('fontWeight', obj, 'hFontWeight')"><i
                                        class="iconfont icon-zitijiacu"></i>
                                </div>
                                <div :class="['fontitem', { 'active': obj.hFontStyle == 'italic' }]"
                                    @click="setFontStyle('fontStyle', obj, 'hFontStyle')"><i
                                        class="iconfont icon-zitixieti"></i>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>显示序号</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isShowIndex"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>显示数量</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <input style="width:60px;margin-right:5px;" type="number"
                                v-model.number="obj.tableData.pageSize"
                                @change="setValueMaxInfo(50, obj.tableData, 'pageSize')" max="50">条
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>隐藏分页</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isHidePage"></el-checkbox>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item title="菜单栏" name="2">
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>开启搜索</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.isSearch"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" v-if="obj.isSearch">
                        <el-col :span="8" class="editlabel">
                            <span>设置搜索列</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-select v-model="obj.tableData.searchLineId" multiple filterable clearable
                                placeholder="请选择数据" size="mini" @change="setEearchListChange">
                                <v-block v-for="item in columnData" :key="item.id">
                                    <el-option v-if="item.source == 0" :label="item.name" :value="item.id" />
                                </v-block>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>开启导出</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.isExport"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>表单尺寸</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-radio-group v-model="obj.size" size="mini">
                                <el-radio-button label="large">large</el-radio-button>
                                <el-radio-button label="small">small</el-radio-button>
                                <el-radio-button label="mini">mini</el-radio-button>
                            </el-radio-group>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <!-- <el-collapse-item title="标题" name="4">
                    <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                        :setFontStyle="setFontStyle"></title-form>
                </el-collapse-item> -->
            </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
// import { mapGetters } from 'vuex'

export default {
    name: "CardTableForm",
    components: {
        // TitleForm: () => import('./mixin/TitleForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    // computed: {
    //     ...mapGetters(['colorMap'])
    // },
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        columnData: Array,
        tableSelectChange: Function,
        deleteDataYinfo: Function,
        setColorChange: Function,
        setFontStyle: Function,
        reloadTimeChangeHandle: Function,
    },
    data() {
        return {
            collapseActives: ['1', '2', '3', '4'],
            // defaultColor: "",
        }
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        // 表格数据新增列
        addTableDataYinfo(item) {
            if (item.length >= 10) {
                this.$message.error("已达到可设置最大数据列");
                return false;
            }
            item.push({
                id: "",
                color2: "",
                fontSize: 16,
                fontWeight: '',
                fontStyle: '',
            });
        },
    }
}
</script>